<template>
  <el-dialog v-model="dialogFormVisible" title="添加项目信息" width="500">
    <el-form :model="form">
      <el-form-item :label-width="formLabelWidth" label="项目Git名称">
        <el-input v-model="form.project_name" autocomplete="off" placeholder="尽量与Git项目名保持一致"/>
      </el-form-item>

      <el-form-item :label-width="formLabelWidth" label="项目Git地址">
        <el-input v-model="form.project_address" autocomplete="off" placeholder="请输入项目的http地址"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="AddNewProject">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import axios from '../../http'
import {ElMessage} from "element-plus";

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  team_id: '',
  project_name: '',
  project_address: '',
})


// 提供一个方法来控制对话框的显示，并接收 teamId
const openDialog = (teamId) => {
  dialogFormVisible.value = true;
  form.team_id = teamId; // 将 teamId 存储到 form 中，方便后续提交
};

async function AddNewProject() {
  // 发送 JSON 格式的表单数据
  const response = await axios.post('team/addNewProject', form);
  // 从响应中获取 code 和 message
  const {code, message} = response;
  console.log(code, message);

  if (code === 1) {
    // 团队添加成功
    ElMessage.success({
      message: '项目添加成功',
      duration: 1000,
      onClose: () => {
        // 关闭表单并清空内容
        dialogFormVisible.value = false;
        form.name = '';
        form.git_address = '';
      }
    })
  } else {
    ElMessage.error(message)
  }
}

// 定义一个事件来暴露 openDialog 方法
defineExpose({
  openDialog
})
</script>